<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Chapter 5: Blood Red</title>

<link rel="shortcut icon" href="images/2reading.gif">
<link href="foti.css" rel="stylesheet" type="text/css">

<style type="text/css">
#bg, #char {display: none;}

#canvas {
	width: 800px;
	height: 600px;
	background: #fff;
	margin: 10px auto 0 auto;
	border: 5px double #aa9e8c;
}


</style>


<script type="text/javascript">
var vc, vctx, vi1, bgr;
	function init(){
		vc = document.getElementById("canvas");
		vctx = vc.getContext("2d");
		bgr = document.getElementById("bg");
		vctx.drawImage(bgr,0,0,800,600);
		vi1 = document.getElementById("char");
		setInterval("animation()",600);		
	}
	
	var dax=0; counter=0;
	function animation(){
		if(counter >= 7) counter = 0; else counter++;
		vctx.drawImage(bgr,0,0,800,600);
		vctx.drawImage(vi1,dax,0,800,600,0,0,800,600);
		dax=800*counter;

	}
</script>


</head>
<body onload="init()">

	<h1>FIGMENT OF THE IMAGINATION</h1>
	<h2>Chapter 5: Blood Red</h2>
	<h2>Scene 3: Pimple Popping</h2>


<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>

<div id="content">

<center><canvas id="canvas" width=800 height=600></canvas></center>

<center><img src="images/photo.png" width=800 style="margin:-5px 0 0 0;"></center>
<img id="bg" src="images/ch5/white.png" width=800 height=600>
<img id="char" src="images/ch5/pop.png">

<div id="scenetext">
<p>
As Ada faced the mirror to assess the problem, an enormous zit jolted her awake. This certainly enraged her. 
"This can't be real!" she protested. Without contemplating, she proceeded to pop the grapelike boil, all 
while Charlie still has yet to be composed. She placed two fingers on each side of the zit, and squeezed. 
Blood emerged from the opening.
</p>

<center><img src="images/line divider.png" width=800 style="opacity: .7;"></center>
	
</div>

<div align="center" style="padding-bottom: 30px;">
<a href="Chapter5Scene2.jsp" title="Lump On Forehead"><button id="button">BACK</button></a>
<a href="tableofcontent.jsp" title="Back to Table of Contents"><button id="button2">TABLE OF CONTENTS</button></a>
<a href="Chapter5Scene4.jsp" title="Blood and Flesh"><button id="button">NEXT</button></a>
</div>

</div>


</body>
</html>

